<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        width: 1500px;
        height: 500px;
        margin-top: 50px;
        margin-left: 50px;
        /* background-color: rgba(165, 42, 42, 0.548); */
        display: flex;
        justify-content: space-around;
    }

    .container .pic {
        width: 600px;
        height: 350px;
        position: relative;
    }

    .container .pic .box1 {
        width: 150px;
        height: 150px;
        background-color: rgba(165, 42, 42, 0.322);
        position: absolute;
        display: none;
        pointer-events: none;
        /* z-index: 100; */
    }

    .container .pic img {
        width: 600px;
        height: 350px;
        /* position: absolute; */
    }

    .container .box {
        width: 600px;
        height: 70px;
        margin-top: 30px;
    }

    .container .box ul {
        width: 600px;
        height: 70px;
        display: flex;
        justify-content: space-around;
    }

    .container .box ul li {
        width: 120px;
        height: 70px;
        list-style: none;

    }

    .container .box ul li img {
        width: 120px;
        height: 70px;
    }
    .right {
        width: 600px;
        height: 350px;
        overflow: hidden;
        position:relative;
    }
    .right img{
        position: absolute;
    }

    .active {
        border: 2px solid black;
    }
</style>

<body>
    <div class="container">
        <div>
            <div class="pic">
                <div class="box1"></div>
                <img src="./img/11.jpg" alt="">
            </div>
            <div class="box">
                <ul>
                    <li class="active"><img src="./img/11.jpg" alt=""></li>
                    <li><img src="./img/12.jpg" alt=""></li>
                    <li><img src="./img/13.jpg" alt=""></li>
                    <li><img src="./img/14.jpg" alt=""></li>
                </ul>
            </div>
        </div>
        <div class="right">
            <img src="./img/11.jpg" alt="">
        </div>
    </div>
    <script>
        const img = document.querySelector('.pic>img')
        const img1 = document.querySelector('.right>img')
        console.log('img1',img1)
        console.log(img)
        const lis = document.querySelectorAll('li')
        console.log(lis)
        const pic = document.querySelector('.pic')
        const right = document.querySelector('.right')

        function tab() {
            for (let i = 0; i < lis.length; i++) {
                lis[i].onmouseover = function () {
                    clear()
                    lis[i].classList.add('active')
                    img.setAttribute('src', `./img/1${i + 1}.jpg`)
                    img1.setAttribute('src', `./img/1${i + 1}.jpg`)
                }
            }
        }
        function clear() {
            for (let i = 0; i < lis.length; i++) {
                lis[i].classList.remove('active')
            }
        }
        tab()

        const box1 = document.querySelector('.box1')

        pic.addEventListener('mousemove', function (e) {
            e = e || window.event
            var x = e.offsetX - box1.offsetWidth / 2
            var y = e.offsetY - box1.offsetHeight / 2
            // console.log(x, y)
            if (x < 0) { x = 0 }
            if (y < 0) { y = 0 }
            if (x > pic.offsetWidth - box1.offsetWidth) { x = pic.offsetWidth - box1.offsetWidth }
            if (y > pic.offsetHeight - box1.offsetHeight) { y = pic.offsetHeight - box1.offsetHeight }

            box1.style.left = x + "px"
            box1.style.top = y + "px"
            let ximg = x * right.offsetWidth / box1.offsetWidth
            console.log(  'box1.offsetWidth',box1.offsetWidth)
            let yimg = y * right.offsetHeight / box1.offsetHeight
            console.log('ximg', ximg)
            img1.style.left = -ximg + 'px'
            img1.style.top = -yimg + 'px'
            console.log('img1.style.left',img1.style.left)
        })
        pic.addEventListener('mouseover', function () {
            box1.style.display = 'block'
            big()
            
        })
        pic.addEventListener('mouseout', function () {
            box1.style.display = 'none'
        })
        //计算图片比例   图片位置=
        function big() {
            img1.style.width = pic.offsetWidth * right.offsetWidth / box1.offsetWidth + 'px'
            console.log('img1.style.width', img1.style.width)
            img1.style.height = pic.offsetHeight * right.offsetHeight / box1.offsetHeight + 'px'

        }
    </script>
</body>

</html>